<template>
  <div style="width: 100%;height: 100%;position: relative">
    <Spin size="large" fix v-if="AllLoading"></Spin>
    <Row>
      <i-col span="6">
        <Tooltip placement="bottom-end" class="tooltip-icon" v-if="SecurityPersonList.length>0">
          <Icon type="md-information-circle"/>
          <div slot="content" style="width:230px;">
            <div v-for="(item,index) in SecurityPersonList" :key="index" class="contentDiv">
              <div class="divLeft">{{ item.name }}</div>
              <div class="divRight">{{ item.information }}</div>
            </div>
          </div>
        </Tooltip>
        <Card style="background-color: #528ed8;">
          <p slot="title">
            城乡最低生活保障对象

          </p>
          <div class="content">
            <span>{{ objectFamily }}户</span><span>{{ objectMember }}人</span>
          </div>
        </Card>
      </i-col>
      <i-col span="6">
        <Tooltip placement="bottom-end" class="tooltip-icon" v-if="SecurityFamilyList.length>0">
          <Icon type="md-information-circle"/>
          <div slot="content" style="width:230px;">
            <div v-for="(item,index) in SecurityFamilyList" :key="index" class="contentDiv">
              <div class="divLeft">{{ item.name }}</div>
              <div class="divRight">{{ item.information }}</div>
            </div>
          </div>
        </Tooltip>
        <Card style="background-color: #528ed8;">
          <p slot="title">
            城乡低保边缘家庭

          </p>
          <div class="content">
            <span>{{ lowFamily }}户</span><span>{{ lowMember }}人</span>
          </div>
        </Card>
      </i-col>
      <i-col span="6">
        <Tooltip placement="bottom-end" class="tooltip-icon">
          <Icon type="ios-arrow-dropdown"/>
          <div slot="content" style="width:200px;">
            <div class="contentDiv">
              <router-link to="ss02011/ss02011List" class="field">
                <div class="divLeft">预警提示</div>
                <div class="divRight">{{ ss02011Count }}</div>
              </router-link>
            </div>
            <div class="contentDiv">
              <router-link to="ss02017/ss02017List" class="field">
                <div class="divLeft">预警处置</div>
                <div class="divRight">{{ ss02017Count }}</div>
              </router-link>
            </div>
          </div>
        </Tooltip>
        <Card style="background-color: #f33e3e;">
          <p slot="title">
            救助对象数据预警
          </p>
          <div class="content">
            {{ warnTotalCount }}条
          </div>
        </Card>
      </i-col>
      <i-col span="6">
        <Tooltip placement="bottom-end" v-if="ToTasksCount>0" class="tooltip-icon">
          <Icon type="ios-arrow-dropdown"/>
          <div slot="content" style="width:200px;">
            <div v-for="(item,index) in ToTasksList" :key="index" class="contentDiv">
              <router-link :to="{path:'/process/processList'+item.ssca0002}" class="field">
                <div class="divLeft">{{ item.name }}</div>
                <div class="divRight">{{ item.count }}</div>
              </router-link>
            </div>
          </div>
        </Tooltip>
        <Card style="background-color: #FF6600;" id="to-do">
          <p slot="title">
            待办任务
          </p>

          <div class="content">
            {{ ToTasksCount }}条
          </div>

        </Card>
      </i-col>
    </Row>
    <br>
    <Row>
      <i-col span="24">
        <!--#####滚动区域#####-->
        <div id="scroll_div" class="scroll_div" @mouseenter="mEnter" @mouseleave="mLeave">
          <div id="scroll_begin">
            <ul>
              <li v-for="(item,index) in fileList" :key="index" @click="showFile(item)">
                {{ item.yjah0002 }}
              </li>
            </ul>
          </div>
          <div id="scroll_end"></div>
        </div>
        <!--#####滚动区域#####-->
      </i-col>
    </Row>
    <pdfModal ref="pdfModal"></pdfModal>
    <br>
    <div id="echartsDiv">
      <Spin size="large" fix v-if="Loading"></Spin>
      <Tabs value="name1" id="echartsTab">
        <Tab-pane label="救助对象类别统计" name="name1">
          <bar :xAxisData="bar.xAxisData" :legendData="bar.legendData" ref="bar"
               :seriesData="bar.seriesData" :title="bar.title" style="width: 100%;" :height="barHeight"></bar>
        </Tab-pane>
        <Tab-pane label="致贫原因统计" name="name2">
          <radar :height="barHeight" :title="radar.title" :indicator="radar.indicator" ref="radar"
                 :legendData="radar.legendData"
                 :seriesData="radar.seriesData"></radar>
        </Tab-pane>
        <Tab-pane label="劳动能力状况统计" name="name3">
          <pie :title="pie.title" :seriesData="pie.seriesData" style="width: 100%;" :height="barHeight"
               ref="pie"></pie>
        </Tab-pane>
        <Tab-pane label="性别统计" name="name4">
          <pie-doughnut :title="pieDoughnut.title" :seriesData="pieDoughnut.seriesData" style="width: 100%;"
                        :height="barHeight" ref="pieDoughnut"></pie-doughnut>
        </Tab-pane>
        <Tab-pane label="年龄段统计" name="name5">
          <funnel :legendData="funnel.legendData" ref="funnel"
                  :seriesData="funnel.seriesData" :title="funnel.title" style="width: 100%;"
                  :height="barHeight"></funnel>
        </Tab-pane>
      </Tabs>
      <div id="echartsSelect">
        <Select style="width:200px" clearable placeholder="请选择区划" v-model="areacode"
                @on-change="chooseAreaCode">
          <Option v-for="item in areaList" :value="item.azaa0001" :key="item.azaa0001">{{ item.azaa0003 }}
          </Option>
        </Select>
      </div>
    </div>

  </div>
</template>
<script>
import {Bar, Pie, Radar, PieDoughnut, Funnel} from '@/views/common/echarts'
import {getAction, postAction} from '@/api/request'
import cookie from 'js-cookie'
import {homepageJs} from './homepage'
import pdfModal from './pdfModal'
import {CommonMixin} from '@/views/common/js/CommonMixin'
import {mapActions} from "vuex";

export default {
  mixins: [homepageJs, CommonMixin],
  components: {
    Bar,
    Pie,
    Radar,
    PieDoughnut,
    Funnel,
    pdfModal
  },
  data() {
    return {
      pageNum: 1,
      pageTotalNum: 1,
      yjah0004Url: "",
      visible1: false,
      objectFamily: 0,
      objectMember: 0,
      lowFamily: 0,
      lowMember: 0,
      ToTasksCount: 0,
      Loading: false,
      AllLoading: false,
      barHeight: "500px",
      value: "",
      scroll_begin: "",
      scroll_end: "",
      scroll_div: "",
      speed: 20,
      timer: "",
      runPie: 0,
      bar: {
        xAxisData: [],
        seriesData: [
          {name: '户数', type: 'bar', data: []},
          {name: '人数', type: 'bar', data: []}
        ],
        legendData: ['户数', '人数'],
        title: ""
      },
      fileList: [],
      radar: {
        title: "",
        legendData: ['致贫原因'],
        indicator: [],
        seriesData: [
          {value: [], name: '致贫原因'}]
      },
      pie: {
        title: "",
        seriesData: [],
      },
      pieDoughnut: {
        title: "",
        seriesData: [],
      },
      funnel: {
        seriesData: [],
        legendData: [],
        title: "",
        max: 0
      },
      areaList: [],
      dataSource: [],
      ToTasksList: [],
      SecurityPersonList: [],
      SecurityFamilyList: [],
      ss02011Count: 0,
      warnTotalCount: 0,
      ss02017Count: 0,
      areacode: "",
      url: {
        getHelpTypeStatistical: "/api/ac/subsistence/HomePageServiceImpl/getHelpTypeStatistical",
        getPowInforStatistical: "/api/ac/subsistence/HomePageServiceImpl/getPowInforStatistical",
        getGenderStatistical: "/api/ac/subsistence/HomePageServiceImpl/getGenderStatistical",
        getWorkAbilityStatistical: "/api/ac/subsistence/HomePageServiceImpl/getWorkAbilityStatistical",
        getAgeStatistical: "/api/ac/subsistence/HomePageServiceImpl/getAgeStatistical",
        getShuffling: "/api/ac/subsistence/HomePageServiceImpl/getShuffling",
        getAreaList: "/api/ac/subsistence/HomePageServiceImpl/getAreaList",
        getToTasksList: "/api/ac/subsistence/HomePageServiceImpl/getToTasksList",
        getSecurityPersonList: "/api/ac/subsistence/HomePageServiceImpl/getSecurityPersonList",
        getSecurityFamilyList: "/api/ac/subsistence/HomePageServiceImpl/getSecurityFamilyList",
        getSs02011Count: "/api/ac/subsistence/HomePageServiceImpl/getSs02011Count",//预警提示接口
        getSs02017Count: "/api/ac/subsistence/HomePageServiceImpl/getSs02017Count",//预警处置接口
        getWarnTotalCount: "/api/ac/subsistence/HomePageServiceImpl/getWarnTotalCount"//预警总数
      }
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo'
    ]),
    chooseAreaCode(e) {
      this.areacode = e;
      this.getStatistical();

    },
    //获取统计图信息
    getStatistical() {
      this.Loading = true;
      var that = this;
      Promise.all([
        new Promise((resolve, reject) => {
          this.getBarInfor(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getPieInfor(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getRadarInfor(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getPieDoughnutInfor(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getFunnel(resolve);
        }),
      ]).then(res => {
        that.Loading = false;
      })
    },
    //获取其他信息
    getOtherInformation() {
      this.AllLoading = true;
      var that = this;
      Promise.all([
        new Promise((resolve, reject) => {
          this.getShuffling(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getAreaList(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getSecurityPersonList(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getSecurityFamilyList(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getToTasksList(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getSs02011Count(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getSs02017Count(resolve);
        }),
        new Promise((resolve, reject) => {
          this.getWarnTotalCount(resolve);
        }),
      ]).then(res => {
        that.AllLoading = false;
      })
    },
    showFile(item) {
      this.$refs.pdfModal.showFile(item.yjah0004);
      this.$refs.pdfModal.modalKey = this.uuid();
    },
    async successLogin() {
      let rest = await this.getUserInfo()
      if (rest.errcode === 0) {
        cookie.set("setSeverUserInfo", rest.data);
        this.$router.push({
          name: this.$config.homeName
        });
      } else {
        $router.push({path: '/login'});
      }
    },
  },
  mounted() {
    if (cookie.get("token")) {
      this.successLogin();
    }
    this.getOtherInformation();
    this.getStatistical();
  }
}
</script>
<style scoped>
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  color: #000;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 38px;
  height: 38px;
  color: white;
}

.field:hover {
  border-bottom: #2b85e4;
  color: #2b85e4;
  cursor: pointer;
}

/*.fieldno {*/
/*line-height: 30px;*/

/*}*/

.field {
  line-height: 30px;
  color: white;
  position: relative;
  left: 0;
  width: 100%;
  display: inline-block;
  height: 30px;
}

.field span {
  margin-left: 15px;
}

#to-do .ivu-poptip-popper {
  left: -34px;
}

/deep/ .ivu-card-head p {
  color: white;
}

/deep/ .ivu-card-head {
  text-align: center;
}

/deep/ .ivu-card-body {
  text-align: center;
}

.content span {
  padding-left: 10px;
  padding-right: 10px;
}

#scroll_div {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  background: #ffffff;
  /*border: 1px solid #999;*/
}

#scroll_div li {
  color: #4d5669;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  background: url('./img/star.png') no-repeat;
  background-size: 20px 20px;
  background-position: 5px 5px;
  padding-left: 40px;
  display: inline-block;
  margin-left: 100px;
}

#scroll_div li:hover {
  border-bottom: #f33e3e;
  color: #f33e3e;
  cursor: pointer;
}

#echartsDiv {
  position: relative;
  width: 100%;
}

#echartsSelect {
  position: absolute;
  top: 0;
  right: 0;
}

#echartsTab {
  top: 5px;
  position: relative;
}

.tooltip-icon {
  font-size: 25px;
  position: absolute;
  z-index: 2;
  right: 20px;
  color: white;
  top: 6px;
  height: 38px;
  cursor: pointer;
}

.contentDiv {
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: relative;
}

.divLeft {
  left: 0px;
  position: absolute;
  /*width: 150px;*/
  text-align: left;
}

.divRight {
  /*width: 50px;*/
  position: absolute;
  right: 0px;
  text-align: right;
}
</style>
